<template>
  <div class="">
    <el-card>
      <div slot="header" class="clearfix">
        <div class="container">
          <el-form :inline="true" size="small" label-width="120px">
            <el-row>
              <el-col :span="24">
                <el-form-item label="订单状态：">
                  <el-radio-group v-model="params.status" type="button" @change="getList(1)">
                    <el-radio-button label="">全部 </el-radio-button>
                    <el-radio-button label="1">未同步</el-radio-button>
                    <el-radio-button label="2">已成功</el-radio-button>
                    <el-radio-button label="-1">失败</el-radio-button>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="创建时间：">
                  <el-radio-group
                    v-model="params.date"
                    type="button"
                    class="mr20"
                    size="small"
                    @change="selectChange()"
                  >
                    <el-radio-button
                      v-for="(item,i) in fromList.fromTxt"
                      :key="i"
                      :label="item.val"
                    >{{ item.text }}</el-radio-button>
                  </el-radio-group>
                  <el-date-picker
                    v-model="params.createtime"
                    value-format="yyyy-MM-dd"
                    format="yyyy-MM-dd"
                    size="small"
                    type="daterange"
                    placement="bottom-end"
                    placeholder="自定义时间"
                    style="width: 250px;"
                    @change="onchangeTime"
                  />
                </el-form-item>
                <el-form-item label="手机号">
                  <el-input v-model="params.phone" clearable placeholder="请输入手机号" />
                </el-form-item>
                <el-form-item label=" ">
                  <el-button type="primary" size="small" class="searchBtn" icon="el-icon-search" @click="handleSearch">查 询</el-button>
                  <el-button type="info" plain @click="handleRet">重置</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div style="text-align:right;">
          <el-button type="primary" size="small" plain @click="down"><i class="el-icon-download" /> 批量导出</el-button>
          <el-button type="warning" size="small" class="ml10" plain @click="importorder"><i class="el-icon-upload" /> 导入下单</el-button>
        </div>
      </div>

      <el-table v-loading="loading" :data="list" style="width: 100%" :empty-text="emtypetxt">
        <el-table-column prop="goods.name" label="商品名称" align="center" min-width="150" :show-overflow-tooltip="true" />
        <el-table-column prop="post_mobile" label="收货电话" align="center" :show-overflow-tooltip="true" />
        <el-table-column prop="real_name" label="姓名" align="center" :show-overflow-tooltip="true" />
        <el-table-column prop="card" label="身份证号" align="center" :show-overflow-tooltip="true" />
        <!-- <el-table-column prop="type" label="运营商" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.type == 1">中国联通</span>
            <span v-else-if="scope.row.type == 2">中国移动</span>
            <span v-else-if="scope.row.type == 3">中国电信</span>
          </template>
        </el-table-column> -->
        <el-table-column prop="province" label="省份" align="center" />
        <el-table-column prop="city" label="城市" align="center" />
        <el-table-column prop="area" label="区域" align="center" />

        <!-- <el-table-column prop="fee_text" label="佣金" align="center" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            {{ scope.row.fee_text_tt[0] }}
          </template>
        </el-table-column> -->
        <el-table-column prop="status_msg" label="失败原因" align="center" :show-overflow-tooltip="true" width="150" />
        <!-- <el-table-column prop="success_time" label="成功时间" align="center" width="150" :show-overflow-tooltip="true" /> -->
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === 1" type="info" size="mini" disable-transitions>未同步</el-tag>
            <el-tag v-if="scope.row.status === 2" type="success" size="mini" disable-transitions>已成功</el-tag>
            <el-tag v-else-if="scope.row.status === -1" type="danger" size="mini" disable-transitions>失败</el-tag>
          </template>

        </el-table-column>
        <!-- <el-table-column prop="from" label="订单来源" align="center" /> -->

        <el-table-column prop="createtime" label="创建时间" align="center" />

        <el-table-column prop="updatetime" label="更新时间" align="center" />

        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-link v-if="scope.row.status === -1" class="ml10" :underline="false" type="primary" title="编辑" @click="resetone(scope.row)">编辑</el-link>
          </template>
        </el-table-column>

      </el-table>
      <div class="pagination">
        <el-pagination
          :current-page="params.page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="params.pagesize"
          layout="total, prev, pager, next"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 导入下单表单 -->
    <el-dialog
      title="导入下单"
      :visible.sync="importDialogVisible"
      :close-on-click-modal="false"
      center
      width="40%"
    >
      <el-form :model="sub" label-width="110px">
        <el-form-item label="选择卡种">
          <el-select v-model="sub.goodsId" clearable placeholder="请选择卡种">
            <el-option v-for="(item) in goodsList" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>

        <el-form-item label="上传文件" style="margin-top: 30px;">
          <el-upload
            action=""
            :limit="1"
            :on-exceed="handleExceed"
            :on-remove="handleRemove"
            accept="*"
            :before-upload="beforeUpload"
            :file-list="fileList"
            :http-request="uploadExcel"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传EXCEL文件，且不超过3M，每次最多5000条数据<span class="ml10" @click="seeMbp">【查看模板】</span></div>
          </el-upload>

        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisiblep = false">取 消</el-button>
        <el-button type="primary" @click="subFormp">确定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="修改导入订单"
      :visible.sync="importShowDialogVisible"
      :close-on-click-modal="false"
      left
      width="60%"
    >
      <el-form size="small" :model="orderSub" label-width="120px">
        <el-form-item label="卡种">
          <el-input v-model="orderSub.goods_name" placeholder="" clearable readonly />
        </el-form-item>
        <el-form-item label="省份">
          <el-input v-model="orderSub.province" placeholder="" clearable />
        </el-form-item>
        <el-form-item label="城市">
          <el-input v-model="orderSub.city" placeholder="" clearable />
        </el-form-item>
        <el-form-item label="区域">
          <el-input v-model="orderSub.area" placeholder="" clearable />
        </el-form-item>
        <el-form-item label="详细地址">
          <el-input v-model="orderSub.address" placeholder="" clearable />
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="orderSub.real_name" placeholder="" clearable />
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input v-model="orderSub.card" placeholder="" clearable readonly />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="orderSub.post_mobile" placeholder="" clearable />
        </el-form-item>

        <el-form-item label="状态">
          <el-radio-group v-model="orderSub.status">
            <el-radio :label="1">待同步</el-radio>
            <el-radio :label="2">已成功</el-radio>
            <el-radio :label="-1">失败</el-radio>
          </el-radio-group>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="importShowDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="orderEdit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { agent_goods, common_upload, order_importOrder } from '@/api/agent'
import { import_order_list, import_order_export, order_edit } from '@/api/import'

import { fromList } from '@/libs/select.js'

export default {
  data() {
    return {
      sub: {
        goodsId: '',
        file: ''
      },
      orderSub: {
        id: '',
        goods_name: '',
        province: '',
        city: '',
        area: '',
        address: '',
        real_name: '',
        card: '',
        post_mobile: '',
        status: '',
        ss_post_mobile: '',
      },
      importDialogVisible: false,
      importShowDialogVisible: false,
      goodsList: [],
      fileList: [], // 上传的文件

      total: 0,
      loading: true,
      emtypetxt: '',
      list: [],
      fromList: fromList,

      params: {
        status: '',
        date: 'all',
        createtime: [],
        phone: '',
        page: 1,
        pagesize: 10
      }

    }
  },
  created() {
    this.getList()
  },
  methods: {
    getGoodsList() {
      agent_goods().then(res => {
        console.log(res)
        if (res.code !== 1) {
          this.$message.error(res.msg)
        }
        this.goodsList = res.data.list
      })
    },

    getList(page) {
      this.params.page = page || this.params.page
      this.emtypetxt = '加载中...'
      this.loading = true
      import_order_list(this.params).then(res => {
        console.log(res)
        this.list = res.data.list
        this.total = res.data.total
        this.loading = false
        if (this.list.length === 0) {
          this.emtypetxt = '暂无数据'
        }
      })
    },
    // 时间筛选
    selectChange(tab) {
      this.params.createtime = []
      this.getList(1)
    },
    onchangeTime(e) {
      this.params.date = 'all'
      this.params.createtime = e
      this.getList(1)
    },
    handleSearch() {
      this.getList(1)
    },
    // 分页
    handleSizeChange(val) {
      this.params.pagesize = val
      this.getList(1)
    },
    handleCurrentChange(val) {
      this.params.page = val
      this.getList()
    },
    handleRet() {
      this.params = {
        status: '',
        date: 'all',
        createtime: [],
        phone: '',
        page: 1,
        pagesize: 10
      }
      this.getList()
    },
    down() {
      const loading = this.$loading({
        lock: true,
        text: '正在导出...',
        spinner: 'el-icon-loading',
        background: 'rgba(20, 20, 20, 0.7)'
      })
      import_order_export(this.params).then(res => {
        const { export_json_to_excel } = require('../../assets/js/Export2Excel')
        const tHeader = res.data.header
        const filterVal = res.data.filter
        const list = res.data.list
        const data = this.formatJson(filterVal, list)
        export_json_to_excel(tHeader, data, res.data.ename)
        loading.close()
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    importorder() {
      this.getGoodsList()
      this.importDialogVisible = true
      this.sub.file = ''
      this.fileList = []
    },
    // 上传文件开始
    handleExceed(files, fileList) {
      this.$message.warning(`每次只能上传1个文件`)
    },
    handleRemove(file, fileList) {
      this.sub.file = ''
    },
    beforeUpload(file) {
      if (file.size > 1024 * 1024 * 5) {
        this.$message.warning('文件不能大于3M')
        return false
      }
      const isText = file.type === 'application/vnd.ms-excel'
      const isTextComputer = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
      if (!isText && !isTextComputer) {
        this.$message.warning('请上传excel格式文件！')
      }
      return (isText || isTextComputer)
    },
    subFormp() {
      if (!this.sub.goodsId) {
        return this.$message.warning('请选择卡种')
      }

      if (!this.sub.file) {
        return this.$message.warning('请上传文件')
      }

      const loading = this.$loading({
        lock: true,
        text: '处理中...',
        spinner: 'el-icon-loading',
        background: 'rgba(20, 20, 20, 0.7)'
      })
      order_importOrder(this.sub).then(res => {
        if (res.code === 9) {
          this.$message.error(res.msg)
          loading.close()
        } else {
          this.$message.success(res.msg)
          this.getList()
          this.importDialogVisible = false
          loading.close()
        }
      })
    },
    seeMbp() {
      window.open('/uploads/demo_import.jpg')
    },
    uploadExcel(item) {
      const sub = new FormData()
      sub.append('file', item.file)
      common_upload(sub).then(res => {
        this.$message.success('上传成功')
        this.sub.file = res.data.fullurl
      })
    },
    resetone(row) {
      this.importShowDialogVisible = true
      this.orderSub.id = row.id
      this.orderSub.goods_name = row.goods.name
      this.orderSub.province = row.province
      this.orderSub.city = row.city
      this.orderSub.area = row.area
      this.orderSub.address = row.address
      this.orderSub.real_name = row.real_name
      this.orderSub.card = row.card
      this.orderSub.post_mobile = row.post_mobile
      this.orderSub.status = row.status
    },
    orderEdit() {
      // console.log(this.orderSub); return
      const loading = this.$loading({
        lock: true,
        text: '处理中...',
        spinner: 'el-icon-loading',
        background: 'rgba(20, 20, 20, 0.7)'
      })
      order_edit(this.orderSub).then(res => {
        if (res.code === 9) {
          this.$message.error(res.msg)
          loading.close()
        } else {
          this.$message.success(res.msg)
          this.getList()
          this.importShowDialogVisible = false
          loading.close()
        }
      })
    }
  }
}
</script>

<style>
  .el-upload__tip{
    color:#afafaf;
  }
</style>
